<template>
	<view class="content">
		<view class="cart-info">
			<view>
				<u-swipe-action :show="item.show" @click="click" @open="open" btn-width="100" :options="options"
					v-for="(item, index) in list" :key="item.id">
					<view class="item u-border-bottom">
						<view class="title-wrap" @click="detail">
							<image src="" mode=""></image>
							<view class="right-info">
								<text class="title u-line-2">{{item.title}}</text>
								<view class="num">
									X<text style="font-size: 24rpx;">{{item.number}}</text>
								</view>
								<view class="buyAgain">
									<view class="">
										{{item.money}}<text style="font-size: 24rpx;">元</text>
									</view>

									<view class="buy">
										再次购买
									</view>
								</view>
							</view>

						</view>
					</view>
				</u-swipe-action>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					img: '',
					title: '肯德基香辣鸡腿堡抵用券20元',
					number: '1',
					money: '2000'
				}, {
					id: 2,
					img: '',
					title: '肯德基香辣鸡腿堡抵用券20元',
					number: '1',
					money: '2000'
				}],
				show: false,
				disabled: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						height: '230rpx',
						background: '#FE6000',
						borderRadius: '16rpx',
						marginLeft: '16rpx',
						fontSize: '28rpx',
					}
				}]
			};
		},
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.PostCollectList() //获取数据
		},
		//上拉加载触发方法
		onReachBottom() {
			if (this.hasNextPage) { //判断是否还有数据需要加载
				this.params.pageNum = this.params.pageNum + 1
				this.loading.status = "loadingText"
				this.PostCollectList() //获取数据
			} else {
				this.loading.status = "nomoreText"
			}
		},
		methods: {
			//调整缴费详情页面
			payDetail() {
				uni.navigateTo({
					url: "../payDetail/index"
				})
			},
			click(index, index1) {
				if (index1 == 0) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			PostCollectList() {
				let params = {
					...this.params
				}
				PostCollectList(params).then(res => {
					let data = res.data.data || []
					this.list = this.list.concat(data)
					this.total = res.data.total
					this.hasNextPage = res.data.hasNextPage
					uni.stopPullDownRefresh() //结束下拉刷新
					if (this.hasNextPage) {
						this.loading.status = "loadmoreText"
					} else {
						this.loading.status = "nomoreText"
					}
				})
			},
			detail(){
				uni.navigateTo({
					url:'/pageB/assets/orderDetail'
				})
			}
		}

	};
</script>

<style scoped lang="scss">
	.content {
		padding: 24rpx;
		box-sizing: border-box;

		.cart-info {
			.title-wrap {
				display: flex;
				align-items: center;

				image {
					width: 180rpx;
					height: 180rpx;
					background: #CCCCCC;
				}

				.right-info {
					flex: 1;
					margin-left: 24rpx;
					.num{
						margin: 16rpx 0 46rpx;
						color: #999;
					}
					.buyAgain {
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							font-size: 36rpx;
							color: #FE6000;
							font-weight: 700;
						}

						.buy {
							background: #1677FE;
							border-radius: 4rpx;
							font-size: 24rpx;
							padding: 12rpx 16rpx;
							color: #fff
						}
					}
				}
			}

		}
	}

	/deep/.u-swipe-del {
		width: 100rpx;
	}

	/deep/.u-btn-text[data-v-7a79cf07] {
		text-align: center;
		line-height: 115px;
		position: static;
		transform: translate(0%, 0%)
	}

	.item {
		padding: 20rpx;
		width: 702rpx;
		background: #FFFFFF;
		border: 1rpx solid #CCCCCC;
		box-shadow: 0 6rpx 20rpx 0 #99999933;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;

	}
</style>